import React, {Component} from 'react'
import {connect} from 'react-redux'
import {NavBar, List, InputItem, Grid,Icon} from 'antd-mobile'
import QueueAnim from 'rc-queue-anim'

import {sendMsg,readMsg} from '../../redux/actions'

const Item = List.Item;

class Chat extends Component {

  state = {
    content: '',
    isShow: false  //是否显示表情列表
  };

  handleSend = () => {
    // 收集数据
    const from = this.props.user._id;
    const to = this.props.match.params.userid;
    const content = this.state.content.trim();
    // 发送请求
    if (content) {
      this.props.sendMsg({from, to, content});
    }
    // 清空数据
    this.setState({
      content: '',
      isShow:false
    })
  };

  componentWillMount() {
    const emojis = [
      '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃',
      '😉', '😊', '😇', '😍', '🤩', '😘', '😗', '😚', '😙', '😔',
      '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔',
      '🤐', '🤨', '😐', '😑', '😶', '😏', '😒', '🙄', '😬', '🤥', '😌'];
    this.emojis = emojis.map(emoj => ({text: emoj}))
  }

  componentDidMount() {
    window.scrollTo(0,document.body.scrollHeight)
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    window.scrollTo(0,document.body.scrollHeight)
  }

  componentWillUnmount() {
    // 发送请求更新未读消息数量
    const from = this.props.match.params.userid;
    const to = this.props.user._id;
    this.props.readMsg(from,to)
  }

  toggleShow = () => {
    const isShow = !this.state.isShow;
    this.setState({isShow});
    if(isShow){
      setTimeout(() => {
        window.dispatchEvent(new Event('resize'))
      })
    }
  };

  render() {

    const {user} = this.props;
    const {users, chatMsgs} = this.props.chat;

    // 计算当前聊天的chatId
    const meId = user._id;
    if (!users[meId]) {   // 如果还没有获取数据，直接不做任何显示
      return null
    }
    const targetId = this.props.match.params.userid;
    const chatId = [meId, targetId].sort().join('_');

    // 对chatMsgs进行过滤
    const msgs = chatMsgs.filter(msg => msg.chat_id === chatId);

    // 得到目标用户的header图片对象
    const targetHeader = users[targetId].header;
    const targetIcon = targetHeader ? require(`../../assets/images/${targetHeader}.png`) : null;

    return (
        <div id='chat-page'>
          <NavBar
              icon={<Icon type='left'/>}
              className='sticky-header'
              onLeftClick={() => {this.props.history.goBack()}}
          >
            {users[targetId].username}
          </NavBar>
          <List style={{marginTop:45,marginBottom:44}}>
            <QueueAnim type='left'>
              {
                msgs.map(msg => {
                  if (msg.from === targetId) {
                    return (
                        <Item
                            key={msg._id}
                            thumb={targetIcon}
                        >
                          {msg.content}
                        </Item>
                    )
                  } else {
                    return (
                        <Item
                            key={msg._id}
                            className='chat-me'
                            extra='我'
                        >
                          {msg.content}
                        </Item>
                    )
                  }
                })
              }
            </QueueAnim>
          </List>
          <div className='am-tab-bar'>
            <InputItem
                placeholder='请输入'
                value={this.state.content}
                onChange={val => this.setState({content: val})}
                onFocus={() => {this.setState({isShow : false})}}
                extra={
                  <span>
                    <span role='img' aria-label="face" onClick={this.toggleShow} style={{marginRight:5}}>😃</span>
                    <span onClick={this.handleSend}>发送</span>
                  </span>
                }
            />
            {this.state.isShow ? (
                <Grid
                    data={this.emojis}
                    columnNum={8}
                    carouselMaxRow={4}
                    isCarousel={true}
                    onClick={(item) => {
                      this.setState({content: this.state.content + item.text})
                    }}/>
            ) : null}

          </div>

        </div>
    )
  }
}

export default connect(
    state => ({user: state.user, chat: state.chat}),
    {sendMsg,readMsg}
)(Chat)